import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Button , Input} from 'antd';
import styles from './IndexPage.less';
import VortexDatagrid from '../components/VortexDatagrid/VortexDatagrid';
import VtxModal from '../components/VtxModal/VtxModal';
import VtxInput from '../components/VtxForm/stateInput';

function IndexPage({dispatch,example}) {
    const {
        dataSource,totalItems,page,rows,selectedRowKeys,
        modalType,isShowModal,modalData,requiredFieldValidator
    } = example;
    //展示新增modal
    function showAdd() {
        dispatch({
            type: 'example/showAdd',
            payload:{
                modalType:'新增',
                isShowModal:true
            }
        })
    }
    //关闭modal
    function closeModal() {
        dispatch({
            type: 'example/updateState',
            payload:{
                isShowModal:false
            }
        })
    }
    //增加培训班
    function addTrainingClass() {
        dispatch({type: 'example/addTrainingClass'});
    }
    //新增中 input修改事件
    function changeModalInput(e,key) {
        dispatch({
            type: 'example/updateState',
            payload: {
                modalData: {
                    ...modalData,
                    [key]: e.target.value
                }
            }
        })
    }
    //修改 报表数据
    function changeTeamData(e,key,i) {
        dispatch({
            type: 'example/changeTeamData',
            payload: {
                val: e.target.value,
                key,i
            }
        })
    }
    //保存 新增 修改的数据
    function save() {
        dispatch({
            type: 'example/updateState',
            payload: {
                requiredFieldValidator: false
            }
        })
        dispatch({type: 'example/save'})
    }
    //列表列参数
    const columns = [
        {title: '序号',dataIndex: 'index',key: 'index',width: 60,}, 
        {title: '姓名',dataIndex: 'name',key: 'name',nowrap: true,width: 80,}, 
        {title: '年龄',dataIndex: 'age',key: 'age',nowrap: true,width: 80}, 
        {title: '地址',dataIndex: 'address',key: 'address',nowrap: true,width: 120}, 
        {title: '操作',key: 'action',width: 100,
            renderButtons: [{
                name: '报班',
                onClick(rowData) {
                    dispatch({
                        type: 'example/showChangeModal',
                        payload: {rowData}
                    });
                }
            }, {
                name: '删除',
                onClick(rowData) {
                    dispatch({
                        type: 'example/deleteDevice',
                        payload: {rowData}
                    })
                }
            }],
    }];
    //列表的参数
    const VortexDatagridProps = {
        autoFit: true,
        columns,
        dataSource,
        hideColumn:true,
        rowSelection:{
            type: 'checkbox',
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(selectedRowKeys,selectedRows);
                let ids = selectedRows.map((item,index)=>{
                    return item.id;
                });
                dispatch({
                    type: 'example/updateState',
                    payload: {selectedRowKeys,selectIds: ids.join(',')}
                })
            }
        },
        pagination: {
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '30', '40', '50'],
            showQuickJumper: true,
            current: page, //后端分页数据配置参数1
            total: totalItems, //后端分页数据配置参数2
            pageSize: rows, //后端分页数据配置参数3
            // 当前页码改变的回调
            onChange(page, pageSize) {
                dispatch({
                    type: 'example/getStopRecordList',
                    payload: {
                        page: page,
                        rows: pageSize,
                        searchParam
                    }
                })
            },
            // pageSize 变化的回调
            onShowSizeChange(current, size) {
                dispatch({
                    type: 'example/getStopRecordList',
                    payload: {
                        page: current,
                        rows: size,
                        searchParam
                    }
                })
            },
            showTotal: total => `合计 ${totalItems} 条`
        }
    }
    //modal=>footer  清空方法更弹出新增弹框的方法功能一样,就直接沿用了
    function modalFooter() {
        return (
            <div>
                {
                    modalType == '查看'?'':
                    <Button onClick={closeModal}>返回</Button>
                }
                {
                    modalType == '新增'?
                    <Button onClick={showAdd}>清空</Button>:''
                }
                <Button type="primary" onClick={modalType=='查看'?closeModal:()=>save()}>
                    {modalType=='查看'?'确定':'保存'}
                </Button>
            </div>
        )
    }
    //渲染 modal中的datagrid
    function randerModalDataGrid() {
        let rColumns = [
            {title: '序号',dataIndex: 'index',key: 'index',width: 60,}, 
            {title: '学校',dataIndex: 'school',key: 'school',nowrap: true,width: 80,
                render: (text,record)=>{
                    return <Input value={record.school} onChange={(e)=>changeTeamData(e,'school',record.index)}/>
                }
            }, 
            {title: '教师',dataIndex: 'teacher',key: 'teacher',nowrap: true,width: 80,
                render: (text,record)=>{
                    return <Input value={record.teacher} onChange={(e)=>changeTeamData(e,'teacher',record.index)}/>
                }
            }, 
            {title: '科目',dataIndex: 'subject',key: 'subject',nowrap: true,width: 120,
                render: (text,record)=>{
                    return <Input value={record.subject} onChange={(e)=>changeTeamData(e,'subject',record.index)}/>
                }
            }, 
            {title: '操作',key: 'action',width: 100,
                renderButtons: [{
                    name: '删除',
                    onClick(rowData) {
                        dispatch({
                            type: 'example/deleteTeam',
                            payload: {rowData}
                        })
                    }
                }],
            }
        ];
        //列表的参数
        let rVortexDatagridProps = {
            autoFit: true,
            columns:rColumns,
            dataSource: modalData.trainingClass,
            pagination: false
        }
        return <VortexDatagrid {...rVortexDatagridProps}/>;
    }
    //渲染modal
    let randerModal = ()=>{
        if(modalType == '查看'){
            return(
                <div>
                    <ModalList name={'姓名'}>
                        <div className={styles.showDetail}>{modalData.name || '--/--'}</div>
                    </ModalList>
                    <ModalList name={'年龄'}>
                        <div className={styles.showDetail}>{modalData.age || '--/--'}</div>
                    </ModalList>
                    <ModalList name={'地址'}>
                        <div className={styles.showDetail}>{modalData.address || '--/--'}</div>
                    </ModalList>
                    <ModalList name={'培训班'} width={'100%'}>
                    </ModalList>
                </div>
            )
        }else{
            return (
                <div>
                    {
                        modalType == '新增'?
                        <ModalList name={'姓名'} require={true}>
                            <VtxInput
                                inherit
                                errorMsg={'姓名不能为空'}
                                validated={requiredFieldValidator?true:modalData.name != ''}
                                className={styles.modalInput}
                                value={modalData.name}
                                onChange={(e)=>changeModalInput(e,'name')}
                                style={{width: '100%'}}
                            />
                        </ModalList>:''
                    }
                    {
                        modalType == '新增'?
                        <ModalList name={'年龄'} require={true}>
                            <VtxInput
                                inherit
                                errorMsg={'年龄不能为空'}
                                validated={requiredFieldValidator?true:modalData.age != ''}
                                className={styles.modalInput}
                                value={modalData.age}
                                onChange={(e)=>changeModalInput(e,'age')}
                                style={{width: '100%'}}
                            />
                        </ModalList>: ''
                    }
                    {
                        modalType == '新增'?
                        <ModalList name={'地址'} require={true}>
                            <VtxInput
                                inherit
                                errorMsg={'地址不能为空'}
                                validated={requiredFieldValidator?true:modalData.address != ''}
                                className={styles.modalInput}
                                value={modalData.address}
                                onChange={(e)=>changeModalInput(e,'address')}
                                style={{width: '100%'}}
                            />
                        </ModalList>: ''
                    }
                    {
                        modalType=='报班'?
                        <ModalList width={'100%'} className={styles.fullrow}>
                            <Button style={{marginBottom: '18px'}} onClick={addTrainingClass}>添加</Button>
                        </ModalList>:''
                    }
                    {
                        modalType=='报班'?
                        <ModalList width={'100%'} className={styles.fullrow}>
                            <div style={{height: '60vh'}}>
                            {
                                randerModalDataGrid()
                            }
                            </div>
                        </ModalList>
                        :''
                    }
                </div>
            )
        }
    }
    return (
        <div className={styles.normal}>
            <div className={styles.title_btn}>
                <Button onClick={showAdd}>新增</Button>
            </div>
            <div className={styles.dataGrid}>
                <VortexDatagrid {...VortexDatagridProps}/>
            </div>
            <VtxModal
                title={`${modalType}`}
                onCancel={closeModal}
                visible={isShowModal}
                maskClosable={false}
                wrapClassName={styles.modal}
                footer={modalFooter()}
            >
                {
                    randerModal()
                }
            </VtxModal>
        </div>
    )
}

export default connect(
    ({example})=>({example})
)(IndexPage);

//弹框单个条件样式处理
function ModalList(props) {
    let {children,name,require,width,className} = props;
    return (
        <div className={`${styles.modalList} ${className}`} style={{width}}>
            {
                name?
                <span className={styles.modalList_left} data-mh={'：'}>
                    {
                        require?
                        <span className={styles.require}>*</span>
                        :''
                    }
                    {name}
                </span>:''
            }
            <div className={styles.modalList_right}>{children}</div>
        </div>
    )
}
